<template>
	<view style="background-color: #f5f5f5;min-height: 100vh;">
		<headerSlotVue :propsColor="'#fff'">
			<template v-slot:header>
				<view class="header_slot flex justify-start align-center" @click="closePage()">
					<view class="action" style="margin-right: 20rpx;">
						<text class="cuIcon-back "></text>
					</view>
					<view class="content text-bold">
						商品详情
					</view>
				</view>
			</template>
		</headerSlotVue>

		<view class="sam_goods">
			<samGoodsDataVue :goods='goods' @addNum="addNum" />
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-action-bar">
			<view class="action-left">
				<button class="action-btn service-btn" open-type="contact" hover-class="none">
					<view class="action-icon">
						<text class="cuIcon-service"></text>
					</view>
					<text class="action-text">客服</text>
				</button>
				<view class="action-btn cart-btn" @click="goPage('/pages/tabBar/cart')">
					<view class="action-icon">
						<text class="cuIcon-cart"></text>
						<view class="cart-badge" v-if="cartCount > 0">{{cartCount}}</view>
					</view>
					<text class="action-text">购物车</text>
				</view>
			</view>
			<view class="action-right">
				<button class="add-cart-btn" @click="addCartList">
					<text class="btn-text">加入购物车</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		AddCart,

	} from "@/api/cart.js";
	import {
		orderInfo
	} from "@/api/order.js";
	import headerSlotVue from '@/components/header-slot.vue';
	import samGoodsDataVue from '@/pages/homePages/samComponents/samGoodsData.vue';
	import {
		errorHandler
	} from '@/utils/errorHandler.js';
	import storage from "@/utils/storage.js";
	import config from '@/config/config';
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			headerSlotVue,
			samGoodsDataVue
		},
		data() {
			return {
				config,
				goodsNum: 1,
				goods: {},
				cartCount: 0,
			}
		},

		onLoad(opt) {
			orderInfo(opt.id).then(res => {
				if (res.data.code === 200) {
					this.goods = res.data.data
				} else {
					uni.showToast({
						title: "出错啦!!",
						icon: "error",
					});
					setTimeout(() => {
						this.closePage()
					}, 1000)
				}
			}).catch(err => {
				uni.showToast({
					title: "出错啦!!",
					icon: "error",
				});
				this.closePage()
			})
		},
		methods: {
			addCartList() {
				// 验证库存
				if (!this.goods.stock || this.goods.stock <= 0) {
					uni.showToast({
						title: '商品库存不足',
						icon: 'none'
					});
					return;
				}
				
				if (this.goodsNum > this.goods.stock) {
					uni.showToast({
						title: '购买数量超出库存',
						icon: 'none'
					});
					return;
				}

				AddCart({
					productId: this.goods._id,
					quantity: this.goodsNum
				}).then(res => {
					console.log(res);
					// 检查响应状态
					if (res.data.code === 200) {
						uni.showToast({
							title: "加购成功",
							icon: "success",
						});
						// 更新购物车数量
						this.cartCount++;
					} else {
						// 处理业务错误
						uni.showToast({
							title: res.data.message || "加购失败",
							icon: "none",
						});
					}
				}).catch(err => {
					console.error('加入购物车失败:', err);
					// 使用统一的错误处理
					errorHandler.showApiError(err, '加购失败');
				})
			},
			addNum(num) {
				this.goodsNum = num
			},
			closePage() {
				uni.navigateBack()
			},
			goPage(route) {
				this.$router.smartNavigate({
					url: route
				})
			}
		},
		// computed: {
		// 	...mapState(['goods'])
		// }
	}
</script>

<style lang="scss" scoped>
	.header_slot {
		padding: 0 32rpx;
		width: 100%;
		font-weight: 500;
		font-size: 36rpx;
		color: #2C2622;
	}

	.sam_goods {
		padding-bottom: 120rpx;
	}

	// 底部操作栏
	.bottom-action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: white;
		border-top: 1px solid #f0f0f0;
		padding: 16rpx 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
		z-index: 100;

		.action-left {
			display: flex;
			align-items: center;
			gap: 32rpx;

			.action-btn {
				display: flex;
				flex-direction: column;
				align-items: center;
				background: transparent;
				border: none;
				padding: 0;
				position: relative;
				line-height: 1;
				font-size: inherit;

				.action-icon {
					width: 48rpx;
					height: 48rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 8rpx;
					position: relative;

					text {
						font-size: 32rpx;
						color: #666;
					}

					.cart-badge {
						position: absolute;
						top: -8rpx;
						right: -8rpx;
						background: #FF2E44;
						color: white;
						font-size: 20rpx;
						font-weight: 600;
						min-width: 32rpx;
						height: 32rpx;
						border-radius: 16rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 0 6rpx;
					}
				}

				.action-text {
					font-size: 22rpx;
					color: #666;
				}

				&.service-btn {
					.action-icon text {
						color: #52C41A;
					}
				}

				&.cart-btn {
					.action-icon text {
						color: #1890FF;
					}
				}
			}
		}

		.action-right {
			flex: 1;
			margin-left: 32rpx;

			.add-cart-btn {
				width: 100%;
				height: 80rpx;
				background: linear-gradient(135deg, #FF6B35 0%, #FE6100 50%, #FF8A00 100%);
				border: none;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 8rpx 24rpx rgba(254, 97, 0, 0.3);
				transition: all 0.3s ease;
				position: relative;
				overflow: hidden;

				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: -100%;
					width: 100%;
					height: 100%;
					background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
					transition: left 0.5s;
				}

				&:active::before {
					left: 100%;
				}

				&:active {
					transform: translateY(2rpx);
					box-shadow: 0 4rpx 12rpx rgba(254, 97, 0, 0.4);
				}

				.btn-text {
					color: white;
					font-size: 32rpx;
					font-weight: 600;
				}
			}
		}
	}

	// 兼容旧样式
	.sam_operate {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 32rpx;
		background-color: #fff;
	}
</style>